//先引入gulp工具包
const gulp = require('gulp')

//引入html打包任务
const htmlMin = require('gulp-htmlmin')

//引入css打包任务
const cssMin = require('gulp-cssmin')

//引入sass打包任务
const sass = require( 'gulp-sass' ) ( require ( 'sass' ) )

//引入js打包任务
//注意点：uglify() 这个包不能压缩ES6的代码
const uglify = require('gulp-uglify')

//引入babel转换任务
const babel = require('gulp-babel')

//引入del清除任务
const del = require('del')

//引入服务器任务
const server = require('gulp-webserver')

//配置html打包任务
const htmlHandler = ()=>{
    //gulp.src() 表示从那个文件开始进行打包
    //** 表示src文件夹下任意目录下，任意名称的后缀名为.html文件
    return gulp.src('./src/**/*.html')
    //pipe() 管道函数，例如：生活中的管道，把水从管道的一头流向另一头（中间进行过滤）
    //pipe() 作用是帮助咱们进行html文件压缩的
    .pipe(htmlMin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input 		checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        // removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    }))
    //最终把代码压缩后放到了那个目录下
    .pipe(gulp.dest('./dist'))
}

//配置css打包任务
const cssHandler = ()=>{
    return gulp.src('./src/sass/*.scss')
    //在打包压缩代码之前，先把sass转成css代码
    .pipe(sass())
    //进行css代码打包压缩
    .pipe(cssMin())
    .pipe(gulp.dest('./dist/css'))
}

//配置js打包任务
const jsHandler = ()=>{
    return gulp.src('./src/js/*.js')
    //注意点：必须先把ES6代码转换成ES5代码后再去进行压缩处理
    .pipe(babel({
        presets: ['es2015']
    }))
    //表示压缩js任务
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
}

//配置移动任务（libs和img文件夹里面的东西）
const libsHandler = ()=>{
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const imgHandler = ()=>{
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}
//配置清除任务
const delHandler = ()=>{
    //在压缩过来之前先把dist目录给清除一下，这样的话可以保证每一次的代码都是最新的
    return del(['./dist'])
}
// 创建一个 webserver 任务
const serverHandler = ()=>{
    return gulp
    //表示打开那个目录下的文件
    .src('./dist')
    .pipe(server({
        host: 'localhost',          // 配置打开浏览器的域名
        port: 2205,                 // 配置打开浏览器的端口号
        livereload: true,           // 自动刷新浏览器
        open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
    }))
}

// 创建一个 watch 任务
const watchHandler =  ()=>{
    //注意点：咱们的sever任务帮助咱们开启了自动刷新，需要把自动刷新执行完毕后，使用监控把dist目录的内容给更新
    gulp.watch('./src/sass/**', cssHandler)
    gulp.watch('./src/js/*.js', jsHandler)
    gulp.watch('./src/**/*.html', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
}
//批量执行任务
module.exports.default = gulp.series(
    //注意点：为什么使用同步代码呢? 先保证清除任务执行了，再去执行其他的任务
    delHandler,
    gulp.parallel(htmlHandler, cssHandler, jsHandler, libsHandler, imgHandler),
    //服务器任务执行完毕后
    serverHandler,
    //监听更新dist目录下的内容
    watchHandler
)